<template>
  <section>
    <!--工具条：高级查询 + 新增-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="keyword" placeholder="请输入关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="keywordQuery">查询</el-button>
        </el-form-item>


      </el-form>
    </el-col>

    <el-table :data="products" highlight-current-row v-loading="listLoading"
              @selection-change="selsChange" @row-dblclick="f1"
              style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="120">
      </el-table-column>
      <el-table-column prop="saleprice" label="售价" width="100">
      </el-table-column>

      <el-table-column label="图片" width="100">
        <template slot-scope="scope">
          <img :src="imgPrefix+scope.row.resources" width="50px" style="float: left">
        </template>
      </el-table-column>

      <el-table-column prop="salecount" label="销售数量" width="100">

      </el-table-column>

      <!--      <el-form-item>-->
      <!--        <el-button type="danger"  @click="onsale" >上架</el-button>-->
      <!--      </el-form-item>-->

      <!--      <el-form-item>-->
      <!--        <el-button type="danger"  @click="offsale" >下架</el-button>-->
      <!--      </el-form-item>-->



      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small"  @click="handleEdit(scope.$index, scope.row)">下单</el-button>
          <!--          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>


    <!--工具条：批量删除 + 分页栏-->
    <el-col :span="24" class="toolbar">
      <!--
        :disabled="this.sels.length===0"
        当sels长度为0的时候，显示当前属性disabled - 禁用。如果不为0就不禁用
       -->
      <!--      <el-button type="danger"   @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
                     :page-size="pageSize" :total="totals" :current-page="currentPage" style="float:right;">
      </el-pagination>
    </el-col>



    <!--编辑界面-->
    <!--
      title="添加或修改" - 标题
      :visible.sync="saveFormVisible" - 控制当前对话框是否显示 - 默认为false不显示
      :close-on-click-modal="false" - 点击对话框以外的区域不关闭
    -->
    <el-dialog :title="title" :visible.sync="saveFormVisible" :close-on-click-modal="false">
      <h1 style="text-align: center">您确定要下单此项目吗</h1>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="saveFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit" :loading="saveLoading">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>

//引入Vue的ueditor的资源
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import quillConfig from '../../common/js/quill-config';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      quillOption: quillConfig,

      //文件上传相关数据
      fileList: [],

      imgPrefix: "http://123.207.27.208",

      //1.分页查询的相关参数
      products: [],  //列表数据
      pageSize: 5,      //每页显示的条数
      currentPage: 1,   //当前页
      totals: 0,        //总数量
      listLoading: false, //加载框

      //2.高级查询的相关参数
      keyword: '',

      //3.批量删除的相关数据
      sels: [],//列表选中列

      //4.添加或修改的相关数据
      title: '',
      saveFormVisible: false, //控制对话框是否显示 - 默认不显示
      saveLoading: false,     //保存的加载框 - 默认不显示
      saveFormRules: {        //表单项验证
        sn: [
          {required: true, message: '请输入编号', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'}
        ]
      },
      //添加和修改中对话框的数据
      saveForm: {
        id: null,
        name: '',
        state: 0,
        costprice:"",
        saleprice: "",
        resources:"",
        salecount:"",
        productDetail:{  //与后端实体类一致
          intro: '',
          orderNotice: ''
        }
      },

      //显示所有的部门经理
      shops: [],
      //显示部门树

    }
  },
  methods: {


    //1.获取宠物列表
    getProducts() {
      let para = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword
      };
      this.listLoading = true; //显示加载框
      this.$http.post("/product", para).then(res => {
        this.products = res.data.data;//给数组赋值 - 显示列表数据
        this.totals = res.data.totals;  //给总数量赋值 - 计算分页栏
        this.listLoading = false;//关闭加载框
      }).catch(res => {
        this.$message.error("系统繁忙，请稍后重试!!!");
      })
    },

    //2.点击分页实现
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getProducts();
    },

    //3.高级查询 = 关键字查询
    keywordQuery() {
      //防止当前页不在第一页的时候 通过关键字查询出现 当前页没有数据的情况
      this.currentPage = 1;
      this.getProducts();
    },



    //5.选项改变的时候触发的逻辑
    selsChange: function (sels) {
      //将选中的对象的数组  赋值给 模型数据sels
      this.sels = sels;
    },


    //7.点击修改按钮弹出对话框
    handleEdit: function (index, row) {
      this.title = "编辑";
      //弹出对话框
      this.saveFormVisible = true;
      this.saveForm = Object.assign({}, row);
      this.fileList=[];
      if(this.saveForm.resources){
        var arr = this.saveForm.resources.split(",");
        for (let i = 0; i < arr.length ; i++) {
          var url = arr[i]
          this.fileList.push({"url":"http://123.207.27.208"+url});
        }
      }

    },


    //9.点击保存提交数据到后端
    saveSubmit: function () {
      this.$confirm('确认提交吗？', '提示', {}).then(() => {
        this.saveLoading = true; //显示加载框
        let para = Object.assign({}, this.saveForm);

        var isArr = para.typeId;
        if (Array.isArray(isArr)) {
          if (isArr.length == 0) {//空数组
            para.typeId = null;
          } else {
            para.typeId = isArr[isArr.length - 1];
          }
        }
        this.$http.post("/product/accept", para).then(res => {
          this.saveLoading = false;  //关闭加载框
          this.saveFormVisible = false; //关闭对话框
          if (res.data.success) {
            this.getProducts();
            this.$message.success("操作成功")
            //重新加载新的数据
          } else {
            alert("系统繁忙，请稍后重试!!![500]")
            this.$message.error(res.data.message);
          }
        }).catch(res => {
          this.saveLoading = false;  //关闭加载框
          this.saveFormVisible = false; //关闭对话框
          alert("系统繁忙，请稍后重试!!![400,404]")
          this.$message.error("系统繁忙，请稍后重试!!![400,404]");
        })
      });
    },

    f1(row, column, event) {
      console.log(row);
    }
  },
  mounted() {
    this.getProducts();
  }
}

</script>

<style scoped>

</style>